import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Column } from '@ant-design/plots';

const DemoColumn = () => {
  const data = [
    {
      school: '南昌大学',
      成果转化金额: 20210980,
    },
    {
      school: '华东交通大学',
      成果转化金额: 19265265,
    },
    {
      school: '东华理工大学',
      成果转化金额: 16125612,
    },
    {
      school: '南昌航空大学',
      成果转化金额: 14579793,
    },
    {
      school: '江西理工大学',
      成果转化金额: 13826295,
    },

  ];
  const config = {
    data,
    xField: 'school',
    yField: '成果转化金额',
    label: {
      // 可手动配置 label 数据标签位置
      position: 'middle',
      // 'top', 'bottom', 'middle',
      // 配置样式
      style: {
        fill: '#FFFFFF',
      },
    },
    xAxis: {
      label: {
        autoHide: true,
        autoRotate: false,
      },
    },
    meta: {
      type: {
        alias: '类别',
      },
      sales: {
        alias: '成果转化金额',
      },
    },
    maxColumnWidth:30,
    yAxis: {
      label: {
        style: {
          fontSize: 16
        }
      }
    },
    xAxis: {
      label: {
        style: {
          fontSize: 16
        }
      }
    },
  };
  return <Column {...config} />;
};

export default DemoColumn
